<template>
	<div class="sellerRegist">
		<seller-tap>
			<span slot='font'>添加商品</span>
			<a href="#/seller" class="fa fa-chevron-left" slot='a'></a>
		</seller-tap>
		<main>
			<div class="head">

				<img :src="'http://localhost:2200'+seller.avatar" />
			</div>
			<form @submit="add">
				<div>
					<span>分类</span>
					<select size='1' multiple name="category" v-model="category">
						<option v-for="item in categorys" :value="item[0].toString()">{{item[1]}}</option>
					</select>
					<p></p>
				</div>

				<div><span>名称</span><input autocomplete="off" @input="input1" @focus="focus" autofocus="autofocus" type="text" name="name" v-model.trim="name" /><label><i  v-if="fei1" style="color: red;" class="invalid fa fa-info-circle"></i><i v-if="name" @click="clear" class="fa fa-times-circle"></i></label></div>

				<div><span>单价</span><input @input="input2" type="text" autocomplete="off" v-model.trim="price" @focus="focus" name="price" /><label><i v-if="fei2" style="color: red;" class="invalid fa fa-info-circle"></i><i v-if="price" @click="clear" class="fa fa-times-circle"></i></label></div>
				<div><span>描述</span><input type="text" autocomplete="off" v-model.trim="describe" @focus="focus" name="describe" /><label><i v-if="describe" @click="clear" class="fa fa-times-circle"></i></label></div>
				<div class="color">
					<span>颜色</span>
					<u v-for="(item,ins) in colorNum">
						<i @click="minus" :value='ins' class="fa fa-minus-circle"></i>
						<input autocomplete="off" type="text" :name="'color'+(++ins)"  />
					</u>
					<span @click="addColor"><i class="fa fa-plus"></i></span>

				</div>
				<div class="model">
					<span>型号</span>
					<u v-for="(item,ins) in modelNum">
						<i @click="minus" :value='ins' class="fa fa-minus-circle"></i>
						<input autocomplete="off" type="text" :name="'model'+(++ins)"  />
						
						<input type="hidden" name="xu" value="1" />
						
					</u>
					<span @click="addModel"><i class="fa fa-plus"></i></span>

				</div>
				<div class="foot">
					<u v-for='(item,ins) in imgNum'>

						<i @click="minus" :value='ins' class="fa fa-minus-circle"></i>
						<img-upload ></img-upload>
					</u>
					<span @click="addImg"><i class="fa fa-plus"></i></span>

				</div>

				<p class="success" style="display: none; padding: 5px 10px; color: orangered;text-align: center;position: absolute;width: 100%;">{{success}}</p>
				<div>
					<button :class="{dis:isOk}">添加</button>
				</div>
			</form>

		</main>

	</div>
</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	import { mapState, mapGetters } from 'vuex'
	import SellerTap from '../components/SellerTap'
	import ImgUpload from '../components/ImgUpload'
	export default {
		data: function() {
			return {
				name: '',
				price: '',
				describe: '',
				isOk: true,
				fei1: true,
				fei2: true,
				fei3: true,
				category: ['life'],
				imgNum: ['1'],
				modelNum: ['1'],
				colorNum: ['1'],
				success: '',

			}
		},
		components: {
			SellerTap,
			ImgUpload
		},
		computed: {
			...mapState([
				'seller', 'categorys', 'data3'
			]),
		},
		methods: {
			add: function(ev) {
				ev.preventDefault();

				var data = new FormData($('form')[0]);
				//				data.lis= 0;
				var that = this;

				$.post({
					url: '/seller/addGoods',
					data,
					contentType: false,
					processData: false,
					success: function(resData) {

						

						if(resData.msg == 'success') {
							that.success = '添加成功';

							$('.success').fadeIn();
							setTimeout(function() {
								$('.success').fadeOut(function() {
									location.reload();
								});
							}, 1000);
						} else {
							console.log(resData);
						}

					}
				})

			},

			clear: function(ev) {
				var name = $(ev.target).parent().siblings('input').attr('name');
				this[name] = '';
				$('form button').attr('type', 'button')
				this.isOk = true;
			},

			focus: function(ev) {

				$(ev.currentTarget).siblings('label').children().each(function(ins, item) {
					$(this).css('display', 'inline');
				})
				$(ev.currentTarget).parent().siblings().find('label i').each(function() {
					$(this).css('display', 'none')
				})
			},
			pattern(val, patts, theData, ins) {
				$('label').eq(ins).children().each(function(ins, item) {
					$(this).css('display', 'inline');
				})
				if(!patts.test(val) || val == '') {
					this[theData] = true;
				} else {
					this[theData] = false;
				}

				if(this.fei1 || this.fei2) {
					$('form button').attr('type', 'button')
					this.isOk = true;
				} else {
					this.isOk = false;
					$('form button').attr('type', 'submit')
				}

			},
			input1() {
				var pat = /^\S{1,}$/;
				this.pattern(this.name, pat, 'fei1', 0);
			},
			input2() {

				var pat = /^\S{1,}$/;
				this.pattern(this.price, pat, 'fei2', 1)

			},

			addImg() {
				this.imgNum.push('1');
			},
			minus(ev) {
				//				var ins = Number($(ev.currentTarget).attr('value'));
				//				
				$(ev.currentTarget).closest('u').empty();
			},
			addColor() {
				this.colorNum.push('1');
			},
			addModel() {
				this.modelNum.push('1');
			}

		}
	}
</script>

<style scoped>
	main {
		padding: 10px 0;
		padding-top: 50px;
	}
	
	main .head img {
		display: block;
		width: 80px;
		margin: 0 auto;
		margin-bottom: 30px;
		border-radius: 50%;
	}
	
	main form div {
		border-bottom: solid 1px #ddd;
		padding: 7px 0;
		line-height: 30px;
		padding: 10px 10px;
	}
	
	main form div span {
		margin-right: 10%;
	}
	
	main form div input {
		width: 55%;
		line-height: 30px;
		border: none;
		margin-right: 10px;
		background: none;
	}
	
	main div:last-child {
		border: none;
	}
	
	main button {
		border: none;
		background: red;
		color: white;
		margin-top: 40px;
		line-height: 40px;
		width: 100%;
		font-size: 17px;
		cursor: pointer;
	}
	
	main div:first-child span {
		position: relative;
		top: -15px;
	}
	
	main div:first-child {
		position: relative;
	}
	
	main div:first-child p {
		position: absolute;
		width: 25px;
		height: 60px;
		background: white;
		right: 16%;
		top: 0;
	}
	
	.fa-times-circle {
		color: #aaa;
	}
	
	.fa-eye-slash {
		color: #ccc;
	}
	
	form>div>label>i:first-child {
		display: none;
	}
	
	form>div>label>i {
		margin-right: 7px;
		font-size: 17px;
	}
	
	.foot {
		padding: 13px 0px;
		margin-top: 0px;
		font-size: 13px;
		text-align: left;
	}
	
	.foot>div {
		border-bottom: none;
	}
	
	.dis {
		color: darkgray;
		background: #ddd;
	}
	
	select {
		text-align: center;
		width: 64%;
		height: 50px;
		border: none;
		overflow-y: scroll;
		line-height: 25px;
		color: chocolate, ;
		background: bisque;
	}
	
	.foot span {
		display: inline-block;
		width: 50px;
		padding-top: 10px;
		margin-left: 22px;
		cursor: pointer;
	}
	
	.foot span i {
		position: relative;
		top: -21px;
		color: red;
		line-height: 100px;
		font-size: 30px;
	}
	
	.color>span:last-child i,
	.model>span:last-child i {
		color: red;
		margin-left: 10px;
		cursor: pointer;
	}
	
	.foot u>div {
		border: none;
		margin: 5px;
	}
	
	.foot u,
	.color u,
	.model u {
		display: inline-block;
		position: relative;
	}
	
	.color input,
	.model input {
		text-align: center;
		width: 60px;
		border: solid 1px #eee;
		padding: 0 5px;
	}
	
	.foot u>i,
	.color u i,
	.model u i {
		position: absolute;
		top: 0;
		z-index: 8;
		font-size: 15px;
		cursor: pointer;
		animation: dong .5s linear infinite;
		color: orangered;
		transform: rotate(10deg);
	}
	
	@keyframes dong {
		from {
			transform: rotateY(50deg);
		}
		to {
			transform: rotateY(-50deg);
		}
	}
</style>